/**
 * 页面设置
 */
function scPageSetting(type){
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    /**
     * 纸张规格
     */
    var list = [
        {
            label: "A3",
            value: "a3",
            unit: "cm",
            size: {
                width: 29.7,
                height: 42
            },
            padding: {
                top: 2.54,
                right: 3.18,
                bottom: 2.54,
                left: 3.18
            }
        },
        {
            label: "A4",
            value: "a4",
            unit: "cm",
            size: {
                width: 21,
                height: 29.7
            },
            padding: {
                top: 2.54,
                right: 3.18,
                bottom: 2.54,
                left: 3.18
            }
        },
        {
            label: "A5",
            value: "a5",
            unit: "cm",
            size: {
                width: 14.8,
                height: 21
            },
            padding: {
                top: 2.54,
                right: 3.18,
                bottom: 2.54,
                left: 3.18
            }
        },
        {
            label: "A6",
            value: "a6",
            unit: "cm",
            size: {
                width: 10.5,
                height: 14.8
            },
            padding: {
                top: 2.54,
                right: 3.18,
                bottom: 2.54,
                left: 3.18
            }
        }
    ];

    var box = null;

    /**
     * 创建视图
     */
    this.createView = function(option){
        box = crEle(null, "sc-page-setting");

        var more = crEle(null, "sc-setting-more");

        if(type == "size"){
            var item = null;
            for(var i in list){
                item = list[i];
                let block = createBlock(list[i], list, option);
                box.appendChild(block);
    
                item.element = block;
            }
    
            more.innerText = "自定义纸张大小...";
        }else if(type == "padding"){
            more.innerText = "自定义页边距...";
        }

        box.appendChild(more);

        more.addEventListener("click", (e)=>{
            let pageSetting = null;

            if(option.listener){
                pageSetting = option.listener("getPageSetting");
            }

            if(option.showDialog){
                option.showDialog(getDetailSetting(pageSetting));
            }
        });

        return box;
    }

    /**
     * 创建选择块
     * @param {*} item 
     * @param {*} list
     * @param {*} option
     */
    var createBlock = function(item, list, option){
        var block = crEle(null, "sc-setting-block");
        var preview = crEle(null, "sc-setting-preview");
        var detail = crEle(null, "sc-setting-detail");
        var shape = crEle(null, "sc-setting-shape");
        var title = crEle(null, "sc-setting-title");
        var content = crEle(null, "sc-setting-content");

        shape.style.width = item.size.width + "px";
        shape.style.height = item.size.height + "px";

        title.innerText = item.label;
        content.innerText = item.size.width + " " + item.unit + " × " + item.size.height + " " + item.unit;

        preview.appendChild(shape);

        detail.appendChild(title);
        detail.appendChild(content);

        block.appendChild(preview);
        block.appendChild(detail);

        block.addEventListener("mousedown", (e)=>{
            if(!option.triggerListener) return;

            let item = list.find(it=>it.element === e.currentTarget);

            if(option.triggerListener){
                option.triggerListener({
                    paper: {
                        type: item.value,
                        unit: item.unit,
                        size: {...item.size},
                        padding: {...item.padding}
                    }
                });
            }
        });

        return block;
    }

    /**
     * 获取详细设置页面
     * @param {*} pageSetting
     * @param {*} option
     * @returns 
     */
    var getDetailSetting = function(pageSetting){
        detail.pageSetting = pageSetting ? pageSetting : {};

        return {
            label: "页面设置",
            component: detail({
                pageSetting: pageSetting
            })
        };
    }

    /**
     * 明细组件
     * @param {*} opt
     */
    var detail = function(opt){
        opt = opt ? opt : {};

        var pageSetting = opt.pageSetting;
        var box = null;

        this.createView = function(option){
            option = option ? option : {};
            box = crEle(null, "sc-page-setting-detail");

            var list = null;
            var numberOpt = null;

            if(type == "size"){
                list = [
                    {label: "宽度", path: "size", name: "width"},
                    {label: "高度", path: "size", name: "height"}
                ];
                numberOpt = {
                    minNum: 2,
                    maxNum: 50
                };
            }else if(type == "padding"){
                list = [
                    {label: "上边距", path: "padding", name: "top"},
                    {label: "下边距", path: "padding", name: "bottom"},
                    {label: "左边距", path: "padding", name: "left"},
                    {label: "右边距", path: "padding", name: "right"}
                ];
                numberOpt = {
                    minNum: 0,
                    maxNum: parseFloat((pageSetting.width / 3).toFixed(1))
                }
            }else if(type == "headFoot"){
                list = [
                    {label: "页眉边距", name: "headTop"},
                    {label: "页脚边距", name: "footBottom"},
                ]
            }

            if(!pageSetting){
                if(option.listener){
                    pageSetting = option.listener("getPageSetting");
                }
            }

            var row = null;
            var item = null;
            for(var i in list){
                item = list[i];

                if(i % 2 == 0){
                    row = crEle(null, "sc-setting-row");
                }

                let label = crEle("label", "sc-setting-label");
                let number = new scNumber(numberOpt);
                let param = {
                    name: item.name,
                    unit: "厘米"
                };
                let input = null;

                if(item.path){
                    param.value = nvl(pageSetting[item.path][item.name], 0);
                }else{
                    param.value = nvl(pageSetting[item.name], 0);
                }
    
                input = number.createView(param);
                label.innerText = item.label + "：";

                if(i % 2 == 0){
                    input.style.marginRight = "30px";
                }
    
                row.appendChild(label);
                row.appendChild(input);
                box.appendChild(row);
            }

            return box;
        }

        this.getData = function(){
            var data = {};
            var elements = box.querySelectorAll("[name]");

            for(var i = 0; i < elements.length; i++){
                let element = elements[i];
                let name = element.getAttribute("name");
                let tagName = element.tagName.toLowerCase();

                if(tagName == "input"){
                    let type = element.getAttribute("type");
                    if(type == "checkbox"){
                        if(!element.checked) continue;
                        data[name] = data[name] ? data[name] : [];
                        data[name].push(element.value);
                    }else if(type == "radio"){
                        if(!element.checked) continue;
                        data[name] = element.value;
                    }else{
                        data[name] = element.value;
                    }
                }else{
                    data[name] = element.value;
                }
            }

            var paper = {
                unit: "cm",
                size: {
                    width: nvl(data.width, pageSetting.size.width),
                    height: nvl(data.height, pageSetting.size.height)
                },
                padding: {
                    left: nvl(data.left, pageSetting.padding.left),
                    right: nvl(data.right, pageSetting.padding.right),
                    bottom: nvl(data.bottom, pageSetting.padding.bottom),
                    top: nvl(data.top, pageSetting.padding.top)
                },
                headTop: nvl(data.headTop, pageSetting.headTop),
                footBottom: nvl(data.footBottom, pageSetting.footBottom)
            };

            pageSetting = paper;

            return {paper: paper};
        }

        return this;
    };

    /**
     * 获取明细组件
     * @returns 
     */
    this.getDetail = function(){
        return new detail();
    }

    /**
     * 优先取非空值
     * @param {*} val1 
     * @param {*} val2 
     * @returns 
     */
    var nvl = function(val1, val2){
        return parseFloat(val1 != null ? val1 : val2);
    }

    if(type == "headFoot"){
        return this.getDetail();
    }
}